.header {
    width: 100%;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(60rpx);
        z-index: -1;
        opacity: 0.6;

        .bgImg {
            width: 100%;
            height: 100%;
        }
    }

    .loginBtn {
        width: 300rpx;
        height: 80rpx;
        background-color: #90ced3;
        color: #FFFFFF;
        font-size: 36rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 10rpx;
        font-weight: 800;
        // box-shadow: 4rpx 4rpx 4rpx #e6e6e6;
    }

    .wasTaped {
        opacity: 0.7;
    }

    .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        border: solid 4rpx #e6e6e6;
        margin-top: 20rpx;
    }

    .username {
        margin-top: 30rpx;
        color: #ffffff;
        font-size: 44rpx;
        text-shadow: 2rpx 2rpx 2rpx #bfbfbf;
    }
}

.optionList {
    width: 100%;
    // height: 600rpx;
    background-color: #ffffff;

    .option {
        width: 670rpx; // 750-40*2
        height: 100rpx;
        padding: 0 40rpx;
        background-color: #ffffff;
        // background-color: #f6f6f6;
        // border-bottom: solid 4rpx #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-weight: 600;

        .optionIcon {
            width: 40rpx;
            height: 40rpx;
            color: #bfbfbf;
            color: #8a8a8a;
            // color: #fd6802;
            // font-weight: 600;
            font-size: 40rpx;
        }

        .optionName {
            width: 600rpx; // 670-40-30
            margin-left: 30rpx;
            color: #515151;
            font-weight: 600;
            font-size: 32rpx;
        }

        .more {
            position: absolute;
            right: 40rpx;
            top: 30rpx;
            width: 40rpx;
            height: 40rpx;
            color: #bfbfbf;
            color: #8a8a8a;
            // font-weight: 600;
            font-size: 40rpx;

        }
    }

    .split {
        width: 100%;
        height: 20rpx;
        background-color: #f6f6f6;
    }

    .wasTaped {
        background-color: #e6e6e6;
    }
}

.logoutBtn {
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-top: 50rpx;
    margin-left: auto;
    margin-right: auto;
    color: #8a8a8a;
    color: #bfbfbf;
    font-weight: 600;
    background-color: #f6f6f6;
    border-radius: 10rpx;
}

.wasTaped {
    background-color: rgba(150, 150, 150, 0.1);
}

.customizeWrapper {
    width: 750rpx;
    height: 500rpx;
    margin-top: 50rpx;
    position: relative;
    z-index: 101;

    .customValue {
        width: 600rpx;
        height: 80rpx;
        margin-top: 20rpx;
        margin-left: auto;
        margin-right: auto;
        padding: 0 30rpx;
        border: 2rpx solid #e2e2e2;
        border-radius: 10rpx;
        font-size: 36rpx;
        color: #515151;
    }

    .placeHolder {
        font-size: 30rpx;
    }
    
    .errMsg{
        margin-top: 20rpx;
        width: 600rpx;
        height: 60rpx;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 60rpx;
        font-size: 30rpx;
        color: rgb(247, 98, 96);
    }

    .btn {
        width: 300rpx;
        height: 80rpx;
        margin-top: 20rpx;
        margin-left: auto;
        margin-right: auto;
        font-size: 36rpx;
        font-weight: 600;
        line-height: 80rpx;
        text-align: center;
        color: #ffffff;
        background-color: #90ced3;
        // background-color: #fd6802;
        border-radius: 10rpx;
    }

    .wasTaped {
        opacity: 0.7;
    }
}